<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<uni-icons type="left" size="24" color="#2c3e50"></uni-icons>
				<text class="back-text">返回</text>
			</view>
			<text class="header-title">消息中心</text>
			<view class="header-right" @click="showMoreActions">
				<uni-icons type="more" size="24" color="#2c3e50"></uni-icons>
			</view>
		</view>
		
		<!-- 消息列表 -->
		<scroll-view scroll-y class="message-list">
			<view class="message-item" v-for="(message, index) in messageList" :key="index" @click="openMessage(message)">
				<view class="message-avatar" :class="message.type">
					<uni-icons :type="message.icon" size="20" color="#ffffff"></uni-icons>
				</view>
				<view class="message-content">
					<view class="message-header">
						<text class="message-title">{{ message.title }}</text>
						<text class="message-time">{{ formatTime(message.time) }}</text>
					</view>
					<text class="message-desc">{{ message.content }}</text>
					<view class="message-meta">
						<text class="message-sender">{{ message.sender }}</text>
						<view class="message-status" :class="message.status" v-if="message.status !== 'read'">
							<text>{{ getStatusText(message.status) }}</text>
						</view>
					</view>
				</view>
				<view class="message-badge" v-if="message.unread > 0">
					<text>{{ message.unread }}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<button class="action-btn" @click="composeMessage">
				<uni-icons type="compose" size="20" color="#3498db"></uni-icons>
				<text>写消息</text>
			</button>
			<button class="action-btn" @click="markAllRead">
				<uni-icons type="checkmarkempty" size="20" color="#27ae60"></uni-icons>
				<text>全部已读</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const messageList = ref([
	{
		id: '001',
		title: '系统告警',
		content: '监测点003设备离线，请及时处理',
		sender: '系统管理员',
		time: new Date(),
		type: 'alert',
		icon: 'sound',
		status: 'unread',
		unread: 2
	},
	{
		id: '002',
		title: '设备维护通知',
		content: '监测点001将于明天进行例行维护',
		sender: '技术部',
		time: new Date(Date.now() - 300000),
		type: 'maintenance',
		icon: 'gear',
		status: 'read',
		unread: 0
	},
	{
		id: '003',
		title: '数据报告',
		content: '本周水质监测报告已生成，请查看',
		sender: '数据分析师',
		time: new Date(Date.now() - 600000),
		type: 'report',
		icon: 'bar-chart',
		status: 'read',
		unread: 0
	},
	{
		id: '004',
		title: '紧急通知',
		content: '发现异常水质数据，需要立即处理',
		sender: '值班工程师',
		time: new Date(Date.now() - 900000),
		type: 'urgent',
		icon: 'fire',
		status: 'unread',
		unread: 1
	},
	{
		id: '005',
		title: '会议通知',
		content: '明天上午10点召开水质监测会议',
		sender: '项目经理',
		time: new Date(Date.now() - 1200000),
		type: 'meeting',
		icon: 'calendar',
		status: 'read',
		unread: 0
	}
])

// 页面加载
onMounted(() => {
	loadMessages()
})

// 加载消息列表
const loadMessages = () => {
	console.log('加载消息列表...')
	// 实际项目中会从后端API获取数据
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 显示更多操作
const showMoreActions = () => {
	uni.showActionSheet({
		itemList: ['清空消息', '设置通知', '消息分类', '导出消息'],
		success: (res) => {
			console.log('选择操作:', res.tapIndex)
		}
	})
}

// 打开消息详情
const openMessage = (message) => {
	// 标记为已读
	message.status = 'read'
	message.unread = 0
	
	// 跳转到消息详情页
	uni.navigateTo({
		url: `/pages/message/detail?id=${message.id}`
	})
}

// 写消息
const composeMessage = () => {
	uni.navigateTo({
		url: '/pages/message/compose'
	})
}

// 全部已读
const markAllRead = () => {
	messageList.value.forEach(message => {
		message.status = 'read'
		message.unread = 0
	})
	
	uni.showToast({
		title: '全部已读',
		icon: 'success'
	})
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		unread: '未读',
		read: '已读',
		urgent: '紧急'
	}
	return statusMap[status] || '未知'
}

// 格式化时间
const formatTime = (time) => {
	const date = new Date(time)
	const now = new Date()
	const diff = now - date
	
	if (diff < 60000) {
		return '刚刚'
	} else if (diff < 3600000) {
		return Math.floor(diff / 60000) + '分钟前'
	} else if (diff < 86400000) {
		return Math.floor(diff / 3600000) + '小时前'
	} else {
		const month = (date.getMonth() + 1).toString().padStart(2, '0')
		const day = date.getDate().toString().padStart(2, '0')
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		return `${month}-${day} ${hours}:${minutes}`
	}
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f7fa;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #e5e5e5;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.header-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.back-text {
	font-size: 28rpx;
	color: #2c3e50;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
}

.header-right {
	padding: 10rpx;
}

.message-list {
	flex: 1;
	padding: 20rpx;
}

.message-item {
	display: flex;
	align-items: flex-start;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
	position: relative;
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.12);
	}
}

.message-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	
	&.alert {
		background: #e74c3c;
	}
	
	&.maintenance {
		background: #f39c12;
	}
	
	&.report {
		background: #3498db;
	}
	
	&.urgent {
		background: #e74c3c;
	}
	
	&.meeting {
		background: #9b59b6;
	}
}

.message-content {
	flex: 1;
}

.message-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.message-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #2c3e50;
}

.message-time {
	font-size: 22rpx;
	color: #7f8c8d;
}

.message-desc {
	font-size: 24rpx;
	color: #7f8c8d;
	line-height: 1.6;
	margin-bottom: 15rpx;
	display: block;
}

.message-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.message-sender {
	font-size: 22rpx;
	color: #95a5a6;
}

.message-status {
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
	font-weight: bold;
	
	&.unread {
		background: #ffebee;
		color: #e74c3c;
	}
	
	&.urgent {
		background: #fff3e0;
		color: #e67e22;
	}
}

.message-badge {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 40rpx;
	height: 40rpx;
	background: #e74c3c;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.message-badge text {
	font-size: 20rpx;
	color: #ffffff;
	font-weight: bold;
}

.bottom-actions {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
	background: #ffffff;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 12rpx;
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	font-size: 26rpx;
	color: #2c3e50;
	font-weight: 500;
	transition: all 0.3s;
	
	&:active {
		transform: scale(0.95);
		background: #e9ecef;
	}
}
</style>
